<template>
  <div id="app">
    <List
      :items="items"
      :size="60"
      :shownumber="10"
    />
  </div>
</template>

<script>
import List from './components/List.vue'

export default {
  name: 'App',
  components: {
    List
  },
  computed: {
    // 要进行渲染的数据列表
    items () {
      // 自己模拟一万条数据，将其内容进行填充
      return Array(10000).fill('').map((item, index) => ({
        id: index,
        content: '列表项内容' + index
      }))
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
